<template>
	<div class="exception-record">
		<el-card>
			<template #header>
				<div class="header-bar">
					异常记录管理
					<el-button size="small" @click="exportCSV">导出</el-button>
				</div>
			</template>

			<el-form :inline="true" :model="filters" class="mb-2">
				<el-form-item label="异常状态">
					<el-select v-model="filters.status" placeholder="全部">
						<el-option label="处理中" value="处理中" />
						<el-option label="已处理" value="已处理" />
					</el-select>
				</el-form-item>
				<el-form-item label="使用部门">
					<el-input v-model="filters.department" />
				</el-form-item>
				<el-form-item label="来源">
					<el-input v-model="filters.source" />
				</el-form-item>
				<el-form-item label="时间范围">
					<el-date-picker v-model="filters.range" type="daterange" range-separator="至" start-placeholder="开始"
						end-placeholder="结束" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary">搜索</el-button>
					<el-button @click="reset">重置</el-button>
				</el-form-item>
			</el-form>

			<el-table :data="filteredList" border stripe>
				<el-table-column prop="code" label="异常编号" width="120" />
				<el-table-column prop="name" label="异常名称" />
				<el-table-column prop="status" label="状态" width="100">
					<template #default="scope">
						<el-tag :type="scope.row.status === '已处理' ? 'success' : 'warning'">{{ scope.row.status
							}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="department" label="使用部门" />
				<el-table-column prop="source" label="来源" />
				<el-table-column prop="desc" label="异常描述" />
				<el-table-column prop="time" label="发生时间" width="160" />
				<el-table-column label="操作" width="100">
					<template #default="scope">
						<el-button size="small" @click="openDialog(scope.row)">处理</el-button>
					</template>
				</el-table-column>

			</el-table>
		</el-card>
		<el-dialog v-model="dialogVisible" title="异常处理" width="500px">
			<el-form :model="form" label-width="80px">
				<el-form-item label="状态">
					<el-select v-model="form.status">
						<el-option label="处理中" value="处理中" />
						<el-option label="已处理" value="已处理" />
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="form.desc" type="textarea" />
				</el-form-item>
				<el-form-item label="责任人">
					<el-input v-model="form.responsible" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button @click="dialogVisible = false">取消</el-button>
				<el-button type="primary" @click="submitForm">保存</el-button>
			</template>
		</el-dialog>
	</div>


</template>

<script setup>
import { ref, computed } from 'vue'
import dayjs from 'dayjs'

const list = ref(
	[...Array(10)].map((_, i) => ({
		code: `ERR00${i + 1}`,
		name: `异常事项 ${i + 1}`,
		status: i % 3 === 0 ? '已处理' : '处理中',
		department: ['仓储部', '质检部', '生产部'][i % 3],
		source: ['人工上报', '系统检测'][i % 2],
		desc: i % 3 === 0 ? '已修复' : '待确认',
		time: dayjs().subtract(i, 'day').format('YYYY-MM-DD HH:mm')
	}))
)

const dialogVisible = ref(false)
const form = ref({})
const currentIndex = ref(-1)

const openDialog = (row) => {
	dialogVisible.value = true
	currentIndex.value = list.value.findIndex(i => i.code === row.code)
	form.value = {
		status: row.status,
		desc: row.desc,
		responsible: row.responsible || ''
	}
}

const submitForm = () => {
	if (currentIndex.value >= 0) {
		const updated = { ...list.value[currentIndex.value], ...form.value }
		list.value[currentIndex.value] = updated
	}
	dialogVisible.value = false
}


const filters = ref({ status: '', department: '', source: '', range: '' })

const filteredList = computed(() => {
	return list.value.filter(item => {
		const f = filters.value
		return [
			!f.status || item.status === f.status,
			!f.department || item.department.includes(f.department),
			!f.source || item.source.includes(f.source),
			!f.range || (dayjs(item.time).isAfter(f.range[0]) && dayjs(item.time).isBefore(f.range[1]))
		].every(Boolean)
	})
})

const reset = () => {
	filters.value = { status: '', department: '', source: '', range: '' }
}

const exportCSV = () => {
	const rows = filteredList.value.map(item => [
		item.code,
		item.name,
		item.status,
		item.department,
		item.source,
		item.desc,
		item.time
	])
	const header = ['异常编号', '异常名称', '状态', '使用部门', '来源', '异常描述', '发生时间']
	const csvContent = [header, ...rows].map(e => e.join(',')).join('\n')
	const blob = new Blob(['\uFEFF' + csvContent], { type: 'text/csv;charset=utf-8;' })
	const link = document.createElement('a')
	link.href = URL.createObjectURL(blob)
	link.download = '异常记录.csv'
	link.click()
}
</script>

<style scoped>
.exception-record {
	padding: 20px;
}

.header-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: bold;
	font-size: 16px;
}
</style>
  
